<template>
  <div>
    <div class="main">
      <div class="top">
        <span>欢迎来到爱家商城&nbsp;
        <router-link to="/login" style="color: red;" v-if="!user">[登录]</router-link>
        <span style="color: red;" v-if="user">{{username}}<a style="color: blue;" @click="quit">[退出登录]</a></span>
        </span>
        <span class="topRight">
          <router-link to="/userMember" style="color:limegreen">我的爱家</router-link>&nbsp;|
          <router-link to="/cart" style="color:limegreen">我的订单</router-link>&nbsp;|
          <router-link to="/userMember" style="color:limegreen">会员中心</router-link>&nbsp;|
          <router-link to="/email" style="color:limegreen">联系我们</router-link>
        </span>
      </div>



      <div class="lsg">
        <h1 class="logo"><router-link to="/home"><img src="../../爱家商城/images/logo.jpg" width="217" height="90" /></router-link></h1>
        <form class="subBox">
          <div>
            <input type="text" style="height: 32px;width: 250px;" />
            <button style="height: 35px;width: 50px;">搜索</button>
          </div>
        </form>
        <div class="gouwuche">
          <div class="gouCar">
            <img src="../../爱家商城/images/gouimg.png" width="19" height="20"
              style="position:relative;top:6px;" />&nbsp;|&nbsp;
            <strong class="red">{{inum}}</strong>&nbsp;件&nbsp;|
            <strong class="red">&yen; {{iprice}}</strong>
            <router-link to="/cart">&nbsp;结算</router-link> <img src="../../爱家商城/images/youjian.jpg" width="5" height="8" />
          </div>
          <div class="myChunlv">
            <router-link to="userMember"><img src="../../爱家商城/images/mychunlv.jpg" width="112" height="34" /></router-link>
          </div>
        </div>
      </div>
    </div>
    <router-view></router-view>

  </div>

</template>

<script>
  export default {
    data() {
      return {
        inum: 0,
        iprice: 0,
        username:"",
        user:JSON.parse(window.sessionStorage.getItem("rsp"))
      }
    },
    created(){
      this.showUsername()
      this.showNumAndPrice()
    },
    methods:{
      showUsername(){
        if (JSON.parse(window.sessionStorage.getItem("rsp"))) {
          this.username=this.user.username
        }
      },
      quit(){
        window.sessionStorage.removeItem("rsp")
        this.$router.push('/home')
      },
      async showNumAndPrice() {
        if (JSON.parse(window.sessionStorage.getItem("rsp"))) {
          let {
            data: rsp
          } = await this.$http.post("/aj-user/showNumAndPrice", JSON.parse(window.sessionStorage.getItem("rsp")))
          this.inum = rsp.num
          this.iprice = rsp.price
          if (rsp.length === 0) {
            this.inum = 0
            this.iprice = 0
          }
        }
      }
    }
  }
</script>

<style>
  div {
    display: block;
  }

  .main {
    width: 980px;
    margin: 0 auto;
  }

  .topRight {
    position: absolute;
    top: 0;
    right: 0;
    color: #747474;
  }

  .top {
    height: 25px;
    line-height: 25px;
    position: relative;
    background-color: #f0efef;
  }

  .lsg {
    padding: 5px 0;
    position: relative;
  }

  .logo {
    width: 217px;
    height: 90px;
  }

  h1 {
    display: block;
    font-size: 2em;
    margin-block-start: 0.67em;
    margin-block-end: 0.67em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: bold;
  }

  .subBox {
    width: 389px;
    height: 34px;
    position: absolute;
    left: 350px;
    top: 35px;
  }

  .gouwuche {
    width: 220px;
    position: absolute;
    right: 0;
    top: 35px;
  }
</style>
